<template>
  <div class="table1">
    <el-table
      height="250"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="body"
      style="width: 100%">
      <el-table-column v-for="(item, index) in head" :key="index" :prop=item.key :label=item.name :fixed=item.fixed  :index="0">
      </el-table-column>
      <el-table-column label="操作"  width="250" fixed="right">
        <template slot-scope="scope">
        <!--<el-button  class="el-icon-zzl-chonglang" style="font-size:13px" @onclick="refresh"></el-button>-->
         <el-tooltip class="item" effect="light" content="刷新" placement="top-start">
           <el-button @click="refresh()">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#el-icon-zzl-chanzi"></use>
             </svg></el-button><!--刷新-->
         </el-tooltip>
        <el-tooltip class="item" content="编辑" placement="top-start">
          <el-button
            @click="handleEdit(scope.$index, scope.row)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#el-icon-zzl-diaoche"></use>
            </svg></el-button><!--删除-->
        </el-tooltip>
        <el-tooltip class="item" content="删除" placement="top-start">
          <el-button
            @click="handleDelete(scope.$index, scope.row)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#el-icon-zzl-hongjiu"></use>
            </svg></el-button><!--删除-->
        </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      head:[],
      body:[],
      loading: true
    }
  },
  created () {
    this.loading=false
  },
  mounted () {
    this.$notify({
      title: '成功',
      message: '这是一条成功的提示消息',
      type: 'success'
    })
    // 刷新
    this.refresh()
  },
  methods :{
    refresh () {
      this.head =[]
      this.body =[]
      // alert(111)
      this.$axios.get('http://www.a/user/tabledata').then(
        req => {
          this.head = req.data.head
          this.body = req.data.body
        }
      ).catch(
        error => console.info(error)
      )
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin: 4px;
  .icon {
    /* 通过设置 font-size 来改变图标大小 */
    width: 2.5em; height: 2.5em;
    /* 图标和文字相邻时，垂直对齐 */
    vertical-align: -0.15em;
    /* 通过设置 color 来改变 SVG 的颜色/fill */
    fill: currentColor;
    /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
       normalize.css 中也包含这行 */
    overflow: hidden;
  }
}
</style>
